JS-[Ajax篇]-古老的XMLHttpRequest

用最古老的方式發送網路請求：XMLHttpRequest 函式

用XMLHttpRequest 函式發送網路請求

老實說，聽到udemy講師Jonas說看到資料回傳後，並顯示在畫面上，真的會有一種感動有同感XD

現在我們來讓這個“請求”變成動態的函式吧！

把上面整個請求程式碼包在一個getCountry函式裡，並帶上country這個參數
觀察api文件所寫的：https://restcountries.com/v3.1/name/{name}
所以只要將國家名帶入到{name}的位置，即可帶到相關的國家相關資料

用setTimeout控制我想要的請求顯示順序，可以這樣玩

• 這裡我用setTimeout包起來，讓ajax call照我的順序依序出現我填入的國家

• 但如果沒有用計時器函式包起來的話，這裡以getCountry函式中用XMLHttpRequest.send所發送的非同步請求是無法預測會先收到並顯示哪個國家資料，但無論哪一個資料先到(ajax calls是同時發送，無法預測誰先抵達)，都會先觸發load事件，並先顯示相關資料

  • 這也是為什麼我們需要Promise來幫我們處理這個無法預測哪一筆資料會先抵達的狀況

上課筆記：

這裡的程式碼和筆記都是線上聽課 jonas講師在udemy - The Complete JavaScript Course 2023: From Zero to Expert!

非常推薦這堂課，打好JAVASCRIPT的基礎

補充：

online api有時候會更新，弱要網站時時顯示正確的樣貌，需要注意是否api是否有改版喔！

免費可以使用的APIs

• https://github.com/public-apis/public-apis
  #### 國家基本資料的url網址
• https://restcountries.com/#api-endpoints
  #### CORS(Chat GPT解釋)

• CORS 是 "Cross-Origin Resource Sharing"（跨源资源共享）的缩写，是一种用于在 web 浏览器中处理跨域资源请求的安全机制。它允许服务器控制在一个源（域、协议或端口）下加载的 web 页面如何请求来自其他源的资源。CORS 通过特定的 HTTP 头部信息，使服务器能够告知浏览器哪些源是被允许的，从而允许或拒绝跨域请求。

• CORS 机制旨在保护用户的隐私和数据安全，防止恶意网站滥用跨域请求来获取敏感信息。通常情况下，浏览器遵循同源策略，即只允许来自同一源的网页进行交互，不允许不同源的网页直接访问对方的数据。CORS 允许服务器声明哪些源具有访问权限，以及允许的请求方法和头部信息，从而实现安全的跨域资源共享。

• 要启用 CORS，服务器需要在响应中添加特定的 HTTP 头部，其中最常用的是 "Access-Control-Allow-Origin" 头部，用于指定允许访问的源。其他的头部，如 "Access-Control-Allow-Methods" 和 "Access-Control-Allow-Headers"，也可以用来控制跨域请求的细节。

• 总之，CORS 是一种在 web 开发中常见的安全机制，用于控制跨域请求，平衡了数据共享和安全性之间的关系。